extract-loader

作用：

修饰指定css、html的url。

API：https://github.com/peerigon/extract-loader

安装：

npm install extract-loader --save-dev

使用：

之前插入样式有2种方式：

1. style-loader结合css-loader，最终由js在页面插入style标签，并把样式塞进去。
2. style-loader/url结合file-loader，最终也是由js在页面插入link标签，引入css文件。

但一个项目最好在线上环境也能分离css和js，所以第一种方式并不好。而第二种方式由于没有使用css-loader，所以无法自动处理url的问题（除非在webpack中配置输出路径与源文件路径保持一致）。

所以，将style-loader/url、file-loader、extract-loader、css-loader结合在一起，就可以解决这个问题了：

//src下包含images、css文件夹，二者平级

/*----src/css/main.css----*/

body{
    background-image: url("../images/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

/*----webpack.config.js----*/

rules:[
    {
        test:/\.css$/,
        include:/src/,
        use:[
            {
                loader:'style-loader/url'
            },
            {
                loader:'file-loader',
                options:{
                    name:"[name].[ext]",
                    outputPath:"style/"
                }
            },
            //注意，如果不配置extract-loader和css-loader，会导致url地址还是"../images/bg.jpg"，与实际地址不符
            {
                loader:'extract-loader',
                options:{
                    publicPath:"../" //如果不指定，也会导致路径错误
                }
            },
            {
                loader:'css-loader'
            }
        ]
    }
]

缺省style-loader，代替js由html-webpack-plugin插件将css文件插入模板，也可以避免样式闪烁的问题。

总结：

publicPath是唯一参数，结合css-loader和file-loader，再配合html-webpack-plugin，实现link插入样式，避免页面闪烁。